<template>
 
  <h1>{{ obj.cart.name }}</h1>
  <button @click="obj.cart.name='奔驰'">点击</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
import {watch,reactive,ref} from 'vue'

// 2. 监听 引用类型的 属性(基本类型);
    let obj = ref({
      name: "张三",
      age: 20,
      cart: {
        name: "宝马",
      }
    })
    // 只要监听引用类型  必须写上 配置项;
    watch(()=>obj.value.cart,(newVal,oldVal)=>{
      console.log(newVal,oldVal);
    },{
      deep: true, //深层监听
      immediate: true, //初始化的时候 就监听一次
    })
</script>
<script>
export default {
  name: 'App',
}
</script>
